<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <th:block th:replace="~{layouts/common::list}"></th:block>
    <style>
        [v-cloak] {
            display: none
        }
        .icon-se .el-select-dropdown__item{
            display: inline-block;
            width: 80px;
            text-align: center;
            font-size: 20px;
        }
        .icon-se .el-select-dropdown__list{
            width: 560px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-button @click="form">新增</el-button>
    <el-table :data="tableData" style="width: 100%" row-key="id">
        <el-table-column prop="id" label="" ></el-table-column>
        <el-table-column prop="name" label="用户名" ></el-table-column>
        <el-table-column prop="account" label="账号" ></el-table-column>
        <el-table-column prop="password" label="密码" ></el-table-column>
        <el-table-column prop="error_number" label="密码错误次数" ></el-table-column>
        <el-table-column prop="lately_time" label="最近登录" ></el-table-column>
        <el-table-column prop="error_date" label="错误日期" ></el-table-column>
        <el-table-column prop="status" label="状态" >
            <template #deault="scope">
                <template v-for="(item, index) in status">
                    <el-tag :key="item.value" v-if="scope.row.status == item.value"  v-bind="theme[index]">{{ item.desc }}</el-tag>
                </template>
            </template>
        </el-table-column>
        <el-table-column prop="role_ids" label="角色" ></el-table-column>
        <el-table-column prop="create_id" label="创建人" ></el-table-column>

        <el-table-column label="操作">
            <template #default="scope">
                <el-link type="primary" size="small" icon="edit" @click="form(scope)">编辑</el-link>
            </template>
        </el-table-column>
    </el-table>
</div>
</body>
<th:block th:replace="~{test/administrators/form::form}"></th:block>
<script>
    let { ref, createApp, reactive } = Vue;
    app.create("#app", {
        setup(){
            const tableData = ref([]);
            const status = ref([]);


            const theme = ref(sc.tagTheme)

            axios({
                method: 'get',
                url: '/admin-test/administrators/list-data',
                params: {
                    page: 1,
                    pageSize: 1,
                }
            }).then(v => {
                tableData.value = v.data.data;
            })

             let formEl = administratorsFormEl(),
                 ch = formEl.formEl.outerHTML;
            sc.axios.get('/admin-test/administrators/get-enum-map', {name: 'status'}).then((res) => {
                status.value = res.data;
                formEl.optionsAssign("status", status.value)
            })


            function form(scope) {
                const id = 'administrators-form';
                layer.open({
                    type: 1,
                    id: id,
                    title: '修改',
                    area: ['800px', '600px'],
                    content: '',
                    success: function(layero, index){
                        layero.find('#'+id).attr('v-cloak', '').html(ch);
                        formEl.initData((scope === null || scope instanceof PointerEvent) ? null : scope.row.id)
                        setTimeout(() => {
                            formEl.appInit(id)
                        }, 10)
                    }
                });
            }

            return {
                tableData,
                status,

                theme,
                form,
            };
        }
    });
</script>
</html>
